<script setup lang="ts">
import router from "@/router";
import { ref, reactive, onMounted } from "vue";
import { classFrontStore } from "@/stores/frontData/he/class";
import { getHMS } from "@/utils/time";
import { meetingStore } from "@/stores/frontData/he/main";
import { goOrder } from "@/api/student/he/pay";
import { payStore } from "@/stores/frontData/he/pay";

const store = classFrontStore();
const student = meetingStore();
const pay = payStore();
const radio1 = ref("1");
const checked1 = ref(false);

const payMethod = (num: any) => {
  obj.payType = num;
};

const obj: any = reactive({
  classId: store.classId,
  payType: "",
  studentId: student.student.id,
});

const goReOrder = () => {
  if (checked1.value == true) {
    // console.log(obj.payType);

    goOrder(obj).then((res) => {
      console.log(res);
      if (res.data.msg == "订单重复,请勿重复下单") {
        alert("订单重复,请勿重复下单");
        router.push("/allorders");
      } else if (res.data.msg == "请求成功") {
        pay.order(res.data.data);
      }
    });

    if (obj.payType == "1") {
      router.push("/resultOrder");
    } else if (obj.payType == "2") {
      console.log(pay.info[0].qrCode);

      router.replace(pay.info[0].qrCode);
    }
  } else {
    alert("请勾选在线课堂协议");
  }
};
</script>
<template>
  <div class="paidMoney">
    <div class="money">
      <div class="paid-connect-box">
        <div class="paid-img">
          <div class="img-box">
            <el-image
              style="width: 100%"
              :src="store.classs[0].img"
              fit="fit"
            />
          </div>
        </div>
        <div class="paid-word">
          <div style="font-size: 19px; margin-bottom: 20px; margin-top: 10px">
            {{ store.classs[0].className }}
          </div>
          <div style="margin-bottom: 30px">
            {{
              store.classs[0].enlistsNum
            }}人购买&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;好评度-&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<span
              class="iconfont icon-fenxiang foottu"
            ></span
            >分享 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
              class="iconfont icon-aixin_shixin foottu"
            ></span
            >分享
          </div>

          <div style="font-size: 12px; margin-top: 25px; margin-left: 20px">
            {{ store.classs[0].className }}
          </div>
          <div style="font-size: 12px; margin-top: 22px; margin-left: 20px">
            课程创立时间:{{ getHMS(store.classs[0].createTime) }}
          </div>
          <div
            style="
              margin-top: 35px;
              height: 30px;
              width: 100%;
              background-color: rgb(218, 218, 218);
              line-height: 30px;
            "
          >
            <span style="margin-left: 10px">
              ￥{{ store.classs[0].price }}</span
            >
          </div>
        </div>
      </div>
      <hr />
      <div class="phone">
        <p>
          课程提醒发送至:<span id="myphone">{{ student.student.phone }}</span>
        </p>
      </div>
      <hr />
      <div class="paidMethod">
        <div>支付方式:</div>
        <el-radio-group v-model="radio1">
          <el-button @click="payMethod('1')">微信支付</el-button>
          <el-button @click="payMethod('2')">支付宝支付</el-button>
        </el-radio-group>
      </div>
      <div class="goOrder">
        <div>
          <el-checkbox v-model="checked1" size="large"
            >同意<a>在线课堂服务协议</a></el-checkbox
          >
        </div>
        <div>
          <el-button type="primary" size="large" @click="goReOrder"
            >立即下单</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.paidMoney {
  width: 100%;

  background-color: #f4f4f4;
}
.money {
  width: 80%;
  margin: auto;
  background-color: white;
  padding: 20px;
}
.paid-nav {
  height: 60px;
  width: 100%;
  line-height: 60px;
  border: 1px solid #ad5353;
}
.outbox {
  width: 90%;
  margin: 0 auto;
}
.paid-connect-box {
  padding-top: 20px;
  height: 430px;
  width: 100%;
}
.paid-img {
  height: 200px;
  float: left;
  width: 30%;

  background-color: rgb(210, 210, 210);
}
.paid-word {
  height: 380px;
  float: left;
  width: 43%;
  padding-left: 24px;
}

.phone {
  height: 70px;
}
.paidMethod {
  display: flex;
  height: 300px;
}
.paidMethod > div:first-child {
  margin-right: 20px;
}
.goOrder {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#myphone {
  margin-left: 10px;
  color: blue;
}
</style>
